<template>
  <div>
    <div v-if="strokeData && strokeData.length > 0" class="stroke-grid">
      <div 
        v-for="(stroke, index) in strokeData" 
        :key="index"
        class="stroke-grid-item"
      >
        <div class="stroke-image-container" :class="{ 'highlight': index === highlightIndex }">
          <!-- 使用汉字和图片替代SVG -->
          <view class="character-display">
            <!-- 笔画图片显示 -->
            <image 
              v-if="strokeImages[index]" 
              :src="strokeImages[index]" 
              class="stroke-image" 
              mode="aspectFit"
            />
            
          </view>
        </div>
        <div class="stroke-info">
          <div class="stroke-number-wrapper">
            <span class="stroke-number">{{index + 1}}</span>
            <span class="stroke-simple">{{stroke.simple}}</span>
          </div>
          <div class="stroke-name-container">
            <span class="stroke-name">{{stroke.value}}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="no-data">
      <text>暂无笔顺数据</text>
      <div>当前字符: {{characterText || '无'}}</div>
    </div>
  </div>
</template>

<script>
import { hanziApi } from '../../api/hanzi.js'

export default {
  name: 'StrokeGrid',
  props: {
    strokeData: {
      type: Array,
      default: () => []
    },
    characterText: {
      type: String,
      default: ''
    },
    highlightIndex: {
      type: Number,
      default: -1 // -1表示不高亮任何笔画
    }
  },
  data() {
    return {
      strokeImages: [], // 存储每个笔画的图片base64数据
      isLoading: false // 防止重复加载标志
    }
  },
  watch: {
    characterText(newVal) {
      if (newVal && this.strokeData && this.strokeData.length > 0 && !this.isLoading) {
        this.loadStrokeImages();
      }
    },
    strokeData: {
      handler(newVal) {
        if (newVal && newVal.length > 0 && this.characterText && !this.isLoading) {
          this.loadStrokeImages();
        }
      },
      deep: true
    }
  },
  methods: {
    async loadStrokeImages() {
      if (this.isLoading || !this.characterText || !this.strokeData || this.strokeData.length === 0) return;
      
      try {
        // 设置加载状态
        this.isLoading = true;
        console.log('开始加载笔画图片:', this.characterText, '共', this.strokeData.length, '画');
        
        // 清空之前的图片数据
        this.strokeImages = [];
        
        // 对每个笔画发送请求获取图片
        for (let i = 0; i < this.strokeData.length; i++) {
          const response = await hanziApi.getCharacterStrokeImage(this.characterText, i + 1);
          if (response && response.data) {
            // 正确提取base64数据
            if (response.data.success && response.data.data) {
              // 需要添加data:image/png;base64,前缀才能正确显示
              this.strokeImages[i] = `data:image/png;base64,${response.data.data}`;
              console.log(`第${i+1}笔图片数据已加载，长度:`, response.data.data.length);
            } else {
              console.error(`第${i+1}笔图片数据格式不正确:`, response.data);
            }
            console.log(`加载第${i+1}笔成功`);
          }
        }
        
        console.log(`成功加载${this.strokeImages.length}个笔画图片`);
      } catch (error) {
        console.error('加载笔画图片失败:', error);
      } finally {
        // 重置加载状态
        this.isLoading = false;
      }
    }
  },
  created() {
    console.log('StrokeGrid 创建 - 字符:', this.characterText);
    console.log('StrokeGrid 创建 - 笔画数据长度:', this.strokeData?.length);
    if (this.strokeData && this.strokeData.length > 0) {
      console.log('StrokeGrid 创建 - 第一笔样本:', JSON.stringify(this.strokeData[0]));
    }
    
    // 初始化时加载一次
    if (this.characterText && this.strokeData && this.strokeData.length > 0) {
      this.loadStrokeImages();
    }
  },
  mounted() {
    console.log('StrokeGrid 挂载 - 字符:', this.characterText);
    console.log('StrokeGrid 挂载 - 笔画数据是否存在:', !!this.strokeData);
    console.log('StrokeGrid 挂载 - 笔画数据长度:', this.strokeData?.length);
  }
}
</script>

<style scoped>
.stroke-order-title {
  font-size: 15px;
  color: #333;
  margin-bottom: 15px;
  font-weight: 500;
  text-align: center;
}

.stroke-grid {
  display: flex;
  flex-direction: row; /* 改为横向排列 */
  margin: 0 -5px;
}

.stroke-grid-nowrap {
  display: flex;
  flex-direction: row; /* 改为横向排列 */
  flex-wrap: nowrap; /* 不换行 */
  overflow-x: auto; /* 超出部分可以滚动 */
  margin: 0 -5px;
  padding-bottom: 10px; /* 为滚动条留出空间 */
  -webkit-overflow-scrolling: touch; /* 提升移动端滚动体验 */
}

.stroke-grid-item {
  flex: 0 0 120px; /* 固定宽度，不伸缩 */
  margin: 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stroke-image-container {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fc;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.stroke-image-container.highlight {
  border: 2px solid #ff3333;
  box-shadow: 0 2px 8px rgba(255, 51, 51, 0.2);
}

.character-display {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stroke-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stroke-info {
  width: 100%;
  text-align: center;
}

.stroke-number-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.stroke-number {
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background-color: #4a89dc;
  border-radius: 50%;
  margin-right: 6px;
}

.stroke-simple {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.stroke-name-container {
  width: 100%;
  text-align: center;
}

.stroke-name {
  font-size: 14px;
  color: #666;
  display: block;
  padding: 2px 0;
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  color: #999;
  font-size: 14px;
}

/* 自定义滚动条样式 */
.stroke-grid::-webkit-scrollbar {
  height: 4px;
}

.stroke-grid::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 2px;
}

.stroke-grid::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 2px;
}

.stroke-grid::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}
</style> 